<template>
  <div class="work-order-details">
    <a-spin :spinning="loading">
      <a-form :model="formState" autocomplete="off">
        <div class="base-info">
          <div class="title">基础信息</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item
                :class="[['waybillNum', 'pickupCity', 'addressType'].includes(item.name) ? 'emphasis-item' : '']"
                v-bind="item"
                :label-col="{ style: 'width:110px' }"
                :wrapper-col="{ style: 'calc(100% - 110px)' }"
              >
                <template v-if="item.name === 'questionScope'">
                  {{ getLabelByDict("QUESTION_SCOPE", formState[item.name]) }}
                </template>
                <template v-else-if="item.name === 'questionType'">
                  {{ getLabelByDict("PRE_PORT_SCOPE", formState[item.name]) }}
                </template>
                <template v-else>{{ formState[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div class="box-info">
        <div class="title">
          <span>运单详情</span>
        </div>
        <div class="table-content">
          <vxe-table border show-overflow="title" height="280" :data="formState.shipmentData" :scroll-y="{ enabled: true, gt: 30 }">
            <vxe-column type="seq" width="50"></vxe-column>
            <vxe-column field="waybillNum" title="运单号"></vxe-column>
            <vxe-column field="customerName" title="客户简称"></vxe-column>
            <vxe-column field="channelName" title="渠道"></vxe-column>
            <vxe-column field="itemNumber" title="件数"></vxe-column>
            <vxe-column field="bizName" title="业务员"></vxe-column>
          </vxe-table>
        </div>
      </div>
      <div class="track-info-wrapper">
        <div class="title">
          <span>问题进度</span>
          <div>
            <a-button type="primary" @click="updateSchedulekHandle" v-if="['1', '2'].includes(activeKey)">更新进度</a-button>
            <a-button style="margin-left: 10px" type="primary" @click="updateFinishdle" v-if="['1', '2'].includes(activeKey)">处理完成</a-button>
          </div>
        </div>
        <TrackInfo :pass-data="formState.pointData || []" @submit="dialogSubmitHandle" :activeKey="activeKey"></TrackInfo>
      </div>
    </a-spin>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import TrackInfo from "../trackInfo/index.vue";
import UploadFile from "../uploadFile/index.vue";
import ModalHook from "@/hook/modalHook";
export default {
  components: {
    UploadFile,
    TrackInfo
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { formItemColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: WorkOrder.ListRows;
    activeKey: string;
  }>(),
  {}
);
const { getLabelByDict } = CommonHook();
const { visible, passData, activeKey } = toRefs(props);
const { formState, init, loading, dialogOpts, drawerOpts } = InitHook();
const { updateFinishdle, updateSchedulekHandle } = OperationHook({
  dialogOpts,
  formState,
  passData,
  init,
  drawerOpts
});

const { dialogSubmitHandle, drawerSubmitHandle } = ModalHook({
  dialogOpts,
  drawerOpts,
  callBack: () => init(passData.value.id)
});
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init(passData.value.id);
    }
  }
);
init(passData.value.id);
</script>
<style lang="stylus" scoped>
.work-order-details {
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .base-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .emphasis-item {
          color: #fe8100;
          > :deep(.ant-form-item-label){
            >label{
              color: #fe8100;
            }
          }
        }
        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }
    .box-info{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .title{
            display: flex;
            flex-direction:column;
            .title-Inner-div{
              display:flex;
              justify-content:space-between;
              align-items:center
            }
        }
        .table-content{
          padding: 0 12px 12px 12px;
        }
    }
    .track-info-wrapper{
        margin-top: 12px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        .title{
          display:flex;
          justify-content:space-between
        }
    }
    .file-list{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .table-content{
        padding: 0 12px 12px 12px;
      }
    }

    .redColor{
      color:red
    }
}
</style>
